<template>
  <div class="home">
    <Layout :style="{padding: '0 24px 24px'}">
      <Breadcrumb :style="{margin: '24px 0'}">
        <BreadcrumbItem>会员管理</BreadcrumbItem>
        <BreadcrumbItem :to="{path: '/Member'}">我的会员</BreadcrumbItem>
        <BreadcrumbItem >红包列表</BreadcrumbItem>
      </Breadcrumb>
      <Content :style="{padding: '24px 182px 24px 24px', minHeight: this.$h.GetContentBodyHeight()+'px', background: '#fff'}">
        <Table :loading="loading_" border :columns="columns7" :data="Redbao" stripe></Table>
        <Page :total="total" :page-size="pagesize" @on-change="changpage" show-total/>
      </Content>
    </Layout>



  </div>
</template>
<script>
  import {
    mapGetters
  } from 'vuex'
  export default {
    props: {

    },
    components: {
    },
    data() {
      return {

        ui_title: '',
        ui_body: '',
        red_sum_num: '',
        total_amount: '',
        wishing: '',
        act_name: '',
        remark: '',
        Redenvelopes: 'Redbao/background/',//红包名称
        GetGoods_Add_flag:true,
        input_val: '',//临时储存 IMG
        QrcodeFlag: false,//添加二维码状态
        QrcodeFlagImage: false,//添加二维码图片状态
        loading_: false,
        total: 0,//数据总条数
        pagesize: 10,//每页条数
        Redbao: [],//红包列表
        Alldata:[],//数据总和
        RidId: '',//创建红包的ID
        columns7: [
          {
            title: '客户端显示标题',
            key: 'ui_title',
            width: 120,
          },
          {
            title: '客户端显示内容',
            key: 'ui_body',
            width: 120,
          },
          {
            title: '当前红包剩余数量',
            key: 'red_now_num',
            width: 120,
          },
          {
            title: '红包金额',
            key: 'total_amount',
            width: 120,
          },
          {
            title: '红包总数量',
            key: 'red_sum_num',
            width: 120,
          },
          {
            title: '微信显示活动名称',
            key: 'act_name',
            width: 130,
          },
          {
            title: '微信显示红包祝福语',
            key: 'wishing',
            width: 130,
          },
          {
            title: '微信显示备注',
            key: 'remark',
            width: 150,
          },
          {
            title: '操作',
            key: 'action',
            width: 250,
            align: 'center',
            render: (h, params) => {
              return h('div', [

                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.Notprize(params.row);
                    }
                  }
                }, '未领红包'),

                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },       style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.Takeprize(params.row);
                    }
                  }
                }, '以领红包'),

              ]);
            }
          }
        ],
      }
    },
    methods: {
      changpage(page){  //点击分页
        this.Redbao = this.Alldata.slice((page - 1) * this.pagesize, page * this.pagesize)
      },
      Notprize(row) { //  为领奖
       this.prizedata(row.id,1)
      },
      Takeprize(row) { //  领奖
        this.prizedata(row.id,2)
      },
      prizedata(rid,s){
        this.http.post({
          'api': 'getactivityinfoitem',
          'data': {
            'brid': rid,
            'uuid':this.GetUserID.businesses_uuid,
            'status':s
          },
        }).then((res) => {
          if (res.data.Response.code == 200) {
            if(res.data.Response.data.length > 0){
              this.$store.commit('SetSaoMaList',res.data.Response.data);
              this.$router.push({
                path: '/Redlist'
              });
            }else {
              this.$Message.warning('木有数据！！！');
            }
          }
        }, (err) => {
          if (err.request.response.Response.code == 500) {
            this.$Notice.error({
              desc: err.request.response.Response.message
            });
          }
        });
      },

      contentbody() {
        this.http.post({
          'api': 'getbusinessactivityitem',
          'data': {
            'bid': this.GetUserID.id,
          },
        }).then((res) => {
          console.log(res.data.Response.data);
          if (res.data.Response.code == 200) {
            this.Processingdata(res.data.Response.data)
          }
        }, (err) => {
          if (err.request.response.Response.code == 500) {
            this.$Notice.error({
              desc: err.request.response.Response.message
            });
          }
        });
      },
      Processingdata(data) {
        this.Alldata = data;
        this.total=data.length;//数据总条数
        this.Redbao = data.slice(0, this.pagesize);
      }
    },
    watch: {},
    computed: {
      ...mapGetters([
        'GetUserID',
        'GetUserInfo'
      ]),
    },
    created() {

    },
    mounted() {
      this.contentbody();
    }
  }
</script>
<style scoped>
  .home {
    width: 100%;
    height: 100%;
  }

  .anti_ {
    width: 300px;
    margin: auto;
    height: 100%;
  }

  .anti_ img {
    width: 100%;
    height: 100%;
    display: block;
    background-size: 100% 100%;
  }

  .pic_add {
    /*width: 100%;*/
    /*height: 300px;*/
    /*position: relative;*/
    /*bottom: 300px;*/
    /*z-index: 9999;*/
    /*opacity: 0;*/
  }
</style>
